<template>
  <div class="demo">
    <h1 @click="myclick">{{msg}}</h1>
    <button @click="getData"> axios get请求 </button>
    <img src="../assets/123.png">

  </div>
</template>

<script>
  export default{
    data(){
      return {
        msg:'我是Vue-cli生成的项目'
      }
    },
    methods:{
      myclick(){
        alert("我是Vue-cli");
      },
      getData(){
        //设置了跨域
        //get 请求
        /* this.axios.get("/home/newslist/newdetail").then(res=>{
          alert(JSON.stringify(res.data));
        }); */
        //get 请求带参数的
        /* this.axios.get("/home/newslist/newdetail",{
          'params':{
            'id':'aaa'
          },
        }).then(res=>{
          alert(JSON.stringify(res.data));
        }); */

        /*post 请求 这样后台就 java后台就无法通过req.getParam() 获取参数
          因为这样 提交的是json对象，相当于提交到requestbody里了
          解决1: 在java后台 通过@RequestBody 映射到实体上
          解决2：将这里的请求对象转换 (可以通过qs,qs是axios库中带的，不需要我们再npm安装一个)
        */
        /* this.axios.post("/home/newslist/newdetail",{'id':'123'}).then(res=>{
          alert(JSON.stringify(res.data));
        }); */

        /* var data = this.qs.stringify({'id':'123'});
        this.axios.post("/home/newslist/newdetail",data,{
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
        ).then(res=>{
          alert(JSON.stringify(res.data));
        }).catch(res=>{
          //发生异常
          console.error(res);
        }); */
        
        /* //post 参数使用data
        var data = this.qs.stringify({'id':'123'})
        this.axios({
          method: 'post',
          url: '/home/newslist/newdetail',
          data: data
        }).then(res=>{
          alert(JSON.stringify(res.data));
        }); */

        //get 参数使用params
        var data = this.qs.stringify({'id':'123'})
        this.axios({
          method: 'get',
          url: '/home/newslist/newdetail',
          params:{
            id:'abc'
          }
        }).then(res=>{
          alert(JSON.stringify(res.data));
        });
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .demo{
    background-color:#D58512
    h1{
      font-size: 14px;
      color: white;
    }
  }
</style>
